<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FPS监控</title>
    <link rel="stylesheet" href="./bootstrap4/bootstrap.min.css">
    <script src="./bootstrap4/jquery.min.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./bootstrap4/bootstrap.min.js"></script>
    <style>
        body {
            padding: 10px;
        }

        .card {
            margin: 5px 0px;
        }
    </style>
</head>

<body>
    <div>
        <h3>
            <span id="page-title"></span>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                data-target="#myModal">更改标题</button>
        </h3>
        <dl class="row">
            <dt class="col-sm-1">处理器：</dt>
            <dd class="col-sm-5">
                <span name="cpu"></span>
            </dd>
            <dt class="col-sm-1">显卡：</dt>
            <dd class="col-sm-5">
                <span name="gpu"></span>
            </dd>
        </dl>
    </div>


    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">更改标题</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <input class="form-control mb-2 mr-sm-2" placeholder="输入标题" id="pTitle">
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" name="save-title">保存</button>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><strong>帧率</strong> 当前/平均</div>
                <div class="card-body">
                    <h1>
                        <span id="currFPS"></span> /
                        <span id="avgFPS"></span>
                    </h1>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><strong>内存</strong> 当前/最大（M）</div>
                <div class="card-body">
                    <h1>
                        <span id="currMEM"></span> /
                        <span id="maxMEM"></span>
                    </h1>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card">
                <div class="card-header">动态图</div>
                <div class="card-body">
                    <div id="chart" style="height:300px;"></div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <button id="download" class="btn btn-primary">下载数据</button>
        </div>
    </div>

    <script src="view.js"></script>
</body>

</html>